<template>
  <div id="app">
<NavigationBar/>
<router-view></router-view>
    <AppFooter/>
  </div>
</template>

<script>
import NavigationBar from "@/components/common/NavigationBar.vue";
import AppFooter from "@/components/common/AppFooter.vue";

export default {
  components: {
    NavigationBar,
    AppFooter
  }
};

</script>

<style scoped>
#app {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

#content {
  flex: 1;
  /* 确保内容不会被 footer 覆盖 */
}

AppFooter {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 5vh; /* 高度占据视窗高度的 10% */
  background: #333; /* 设置背景色 */
  color: white; /* 设置文本颜色 */
  text-align: center; /* 文本居中 */
  line-height: 10vh; /* 垂直居中对齐文本 */
}
</style>
